<template>
    <div>
        <input type="text" placeholder="dsfsdf" v-model="val" @input="verInput" /> 
        <i v-if="isShow" :class="[ispass ? 'icon-tongguo' : 'icon-shibai', 'iconfont']"></i>
    </div>
</template>
<style scoped>
    input{
        width: 80vw;
        padding: 10px;
        outline: none;
        margin-right: 10px;
        border-radius: 6px;
        border: 1px solid transparent;
    }
    input:focus{
        border-color: aqua;
    }
    div{
        box-sizing: border-box;
        padding: 10px 30px;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .icon-tongguo{
        color: green;
    }
    .icon-shibai{
        color: brown;
    }
</style>
<script>
export default {
    name: "ver-input",
    props:{
        type:{
            default:'text',
            type: String,
        }
    },
    data(){
        return{
            ispass: false,
            isShow: false,
            val: '',
        }
    },
    methods:{
        verInput(){
            this.isShow = true;
            let c_val = this.val;
            if(c_val.length > 10){
                this.ispass = true;
            }else{
                this.ispass = false;
            }
        }
    }

}
</script>
